<template>
  <div class="user-avatar">
    <a-dropdown>
      <a class="user-dropdown" @click.prevent>
        <a-avatar size="small" :src="userInfo.avatar || defaultAvatar" />
        <span class="username">{{ userInfo.nickname || userInfo.username || '用户' }}</span>
        <DownOutlined />
      </a>
      <template #overlay>
        <a-menu>
          <a-menu-item key="profile" @click="handleProfile">
            <UserOutlined />
            个人中心
          </a-menu-item>
          <a-menu-item key="settings" @click="handleSettings">
            <SettingOutlined />
            系统设置
          </a-menu-item>
          <a-menu-divider />
          <a-menu-item key="logout" @click="handleLogout">
            <LogoutOutlined />
            退出登录
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script setup>


const props = defineProps({
  userInfo: {
    type: Object,
    default: () => ({
      nickname: '管理员',
      avatar: '',
      username: 'admin'
    })
  }
});

const emit = defineEmits(['profile', 'settings', 'logout']);

const defaultAvatar = '';

const handleProfile = () => {
  emit('profile');
};

const handleSettings = () => {
  emit('settings');
};

const handleLogout = () => {
  emit('logout');
};
</script>

<style scoped lang="scss">
.user-avatar {
  .user-dropdown {
    display: flex;
    align-items: center;
    color: #666;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.3s;

    &:hover {
      background: #f5f5f5;
      color: #1890ff;
    }

    .username {
      margin: 0 8px;
      font-size: 14px;
    }
  }
}
</style>